<template>
  <UploadFile
    class="file"
    ref="uploadRef"
    v-model:fileList="fileList"
    :draggable="false"
    tip="请上传JPG、JPEG、PNG"
    :fileTypeList="fileTypeList"
    :userId="userId"
    :type="2"
    :listType="'text'"
    :autoUpload="true"
    @uploadOk="uploadOk"
    @delBgImg="delImg"
  />
</template>
<script setup lang="ts">
import { useVModel } from '@vueuse/core';

const props = withDefaults(
  defineProps<{
    props: { [propName: string]: any };
    name?: string;
    required?: boolean;
    oneValue: any;
    disabled?: boolean;
    regex?: {
      [name: string]: {
        role: any;
        name: any;
      };
    };
  }>(),
  {}
);
const emits = defineEmits(['update:props']);
const getProps = useVModel(props, 'props', emits);
const fileTypeList = ['.png', '.jpeg', '.jpg'];
const userId = Number(localStorage.getItem('userId'));
const uploadRef = ref();
onMounted(() => {
  setUploadList();
});
/**
 * 上传完成
 * @param file
 */
const uploadOk = async (fileItem: any) => {
  //重新设置props的fileList
  console.log('fileItem', fileItem);

  const { url, response, name: fileName, uid } = fileItem;
  const { id: fileId, DownloadPath: fileUrl } = response;
  if (!getProps.fileList) getProps.fileList = [];
  getProps.fileList.push({ fileId, fileUrl, fileName, uid });
  console.log('getProps.fileList', getProps.fileList);

  setUploadList();
};
//文件列表
const setUploadList = () => {
  const tempFileList: any[] = [];
  getProps?.fileList?.forEach((item) => {
    const { fileId, fileUrl, fileName, uid } = item;
    tempFileList.push({
      name: fileName,
      status: 'done',
      url: fileUrl,
      uuid: uid,
      response: { fileId, fileUrl, fileName }
    });
  });
  uploadRef.value.uploadList = tempFileList;
};
const delImg = async (id: number) => {
  //
};
</script>
<style lang="less" scoped></style>
